<template>
  <div class="customer">
    <van-nav-bar title="客户信息"></van-nav-bar>
    <div id="myChart"></div>
    <van-search
      v-model="title"
      shape="round"
      placeholder="请输入客户昵称"
      @input="searchKey"
    />
    <main>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        :immediate-check="false"
        @load="onLoad"
      >
        <div class="item" v-for="item in customerArr" :key="item.id">
          <div class="left">
            <img :src="$publicObj.urlImg(item.image)" alt="" />
          </div>
          <div class="right">
            <h3>
              {{ item.nickname }}
              <img src="../../assets/images/customer/customer_boy.png" alt="" />
            </h3>
            <p>
              <span>
                <img
                  src="../../assets/images/customer/customer_phone.png"
                  alt=""
                />
                {{ item.phone || "未知" }}
              </span>
              <span>
                <img
                  src="../../assets/images/customer/customer_wchat.png"
                  alt=""
                />
                {{ item.weChatNo || "未知" }}
              </span>
            </p>
            <span>
              <img
                src="../../assets/images/customer/customer_local.png"
                alt=""
              />
              {{ `${item.province || ""} ${item.city || ""}` }}
            </span>
          </div>
        </div>
      </van-list>
    </main>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
export default {
  name: "customer",
  data() {
    return {
      customerArr: [],
      title: "", //关键字
      time: null,
      history: 0, //历史
      today: 0, //今日新增
      loading: false, //加载状态
      finished: false, //完成
      page: 1, //页数
      limit: 8, //条数
      totalPage: 100, //总页数
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    document.querySelector("html").style.backgroundColor = "#fff";
    document.querySelector("body").style.backgroundColor = "#fff";
  },
  //生命周期 - 挂载完成（访问DOM元素）
  async mounted() {
    await this.getCustomerList();
    this.setChart();
  },
  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;
      this.getCustomerList();
      // 加载状态结束
      this.loading = false;
    },
    //设置图
    setChart() {
      var chartDom = document.getElementById("myChart");
      var myChart = echarts.init(chartDom);
      let option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "30%",
          right: "15%",
          orient: "vertical",
          data: ["今日新增", "历史客户"],
          //后面加数据
          formatter: (name) => {
            var index = 0;
            var clientlabels = ["今日新增", "历史客户"];
            var clientcounts = [this.today, this.history];
            clientlabels.forEach(function(value, i) {
              if (value == name) {
                index = i;
              }
            });
            return name + "  " + clientcounts[index];
          },
        },
        color: ["#4e7aff", "#ed655a"],
        series: [
          {
            name: "客户信息",
            type: "pie",
            radius: ["40%", "70%"],
            center: ["25%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 1,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "10",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.today || 0, name: "今日新增" },
              { value: this.history || 0, name: "历史客户" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
    //搜素
    searchKey() {
      clearTimeout(this.time);
      this.time = setTimeout(async (_) => {
        this.getCustomerList();

        this.time = null;
      }, 700);
    },
    //获取客户列表
    async getCustomerList() {
      let obj = {
        title: this.title,
        page: this.page,
        pageSize: this.limit,
        type: 0,
        agentId: sessionStorage.getItem("agentIds"),
      };
      let res = await this.$api.getCustomerList(obj);
      if (res.code !== 0) return;
      //判断是否是第一页
      if (this.page == 1) {
        this.customerArr = res.data.list || [];
      } else {
        this.customerArr.push(...res.data.list);
      }
      this.totalPage = res.data.totalPage;
      this.history = res.info[1].count || 0;
      this.today = res.info[0].count || 0;
    },
  },
};
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */
#myChart {
  width: 100%;
  height: 125px;
  background-color: #fff;
}
.van-search {
  padding: 10px 15px;
}
main {
  height: calc(100vh - 275px);
  overflow-y: scroll;
  .item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #ebedf0;
    .left {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      img {
        width: 100%;
        height: 100%;

        border-radius: 50%;
      }
    }
    .right {
      margin-left: 11px;
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: space-between;
      font-size: 11px;
      color: #999999;
      h3 {
        display: flex;
        align-items: center;
        font-size: 14px;
        font-weight: 700;
        color: #666666;
        img {
          width: 16px;
          height: 16px;
          margin-left: 9px;
        }
      }
      span {
        display: flex;
        align-items: center;
        img {
          width: 15px;
          height: 15px;
          margin-right: 7px;
        }
      }
      p {
        display: flex;
        span {
          &:last-of-type {
            margin-left: 22px;
          }
        }
      }
    }
  }
}
</style>
